import { VxeFormItemProps, VxeGridPropTypes } from '@gui-pkg/antdcomponents';
import { h } from 'vue';
import {Switch, Tag,Tooltip} from 'ant-design-vue';
import {useMessage} from "@/hooks/web/useMessage";
import {updateTargetStatus} from '@/api/alerts/warningConfig';

const typeData = [{value: "1", label: '雨量告警'}, {value: "2", label: '水位告警'}]
const statusData = [{value: "1", label: '极高风险'}, {value: "2", label: '高风险'}]
const targetData = [{value: "镇负责人", label: '镇负责人'}, {value: '村负责人', label: '村负责人'}]
const seriesData = [{value: "1", label: '启用'}, {value: "0", label: '停用'}]

export const columns: VxeGridPropTypes.Columns = [
  {
    title: '配置名称',
    field: 'name',
    align: 'center',
    fixed: 'left',
    treeNode: true,
  },
  {
    title: '预警类型',
    field: 'warnType',
    align: 'center',
    formatter: ({cellValue}) => {
      const data: any = typeData?.find((item:any) => item.value === cellValue);
      return data?.label;
    }
  },
  {
    title: '预警等级',
    field: 'warnLevel',
    align: 'center',
    formatter: ({cellValue}) => {
      const data: any = statusData?.find((item:any) => item.value === cellValue);
      return data?.label;
    }
  },
  {
    title: '发送对象',
    field: 'target',
    align: 'center',
  },
  {
    title: '发送内容',
    field: 'msgContent',
    align: 'center',
  },
  {
    title: '是否启用',
    field: 'status',
    width: 120,
    align: 'center',
    slots: {
      default: ({ row }) => {
        if (!Reflect.has(row, 'pendingStatus')) {
          row.pendingStatus = false;
        }

        const switchComponent = h(Switch, {
          checked: row.status == '1',
          checkedChildren: '停用',
          unCheckedChildren: '启用',
          loading: row.pendingStatus,
          onChange(checked: boolean) {
            row.pendingStatus = true;
            const newStatus = checked ? '1' : '0';
            const { createMessage } = useMessage();
            updateTargetStatus({id: row.id, status: newStatus})
              .then(() => {
                row.status = newStatus;
                createMessage.success(`已成功修状态`);
              })
              .catch(() => {
                createMessage.error('修改状态失败');
              })
              .finally(() => {
                row.pendingStatus = false;
              });
          },
        });

        let text = '高风险预警自动发送配置未启用，系统将无法自动根据雨量预警值进行短信和智能语音方式发送山洪预警信息，可点击按钮开启该项自动发送配置';
        let textT = '高风险预警自动发送配置已启用，系统将自动根据雨量预警值进行短信和智能语音方式发送山洪预警信息，可点击按钮关闭该项自动发送配置';
        if(row.warnLevel=='1'){
          text = '极高风险预警自动发送配置未启用，系统将无法自动根据雨量预警值进行短信和智能语音方式发送山洪预警信息，可点击按钮开启该项自动发送配置';
          textT = '极高风险预警自动发送配置已启用，系统将自动根据雨量预警值进行短信和智能语音方式发送山洪预警信息，可点击按钮关闭该项自动发送配置';
        }

        // 使用 Tooltip 包装 Switch 组件
        return h(
          Tooltip,
          {
            title: row.status == '1' ? textT : text,
            placement: 'top'
          },
          {
            default: () => switchComponent
          }
        );
      },
    },
  },
  {
    width: 160,
    title: '操作',
    align: 'center',
    slots: { default: 'action' },
    fixed: 'right',
  },
];

export const searchFormSchema: VxeFormItemProps[] = [
  {
    field: 'name',
    title: '名称',
    itemRender: {
      name: 'AInput',
    },
    span: 6,
  },
  {
    field: 'warnLevel',
    title: '预警等级',
    itemRender: {
      name: 'ASelect',
      props: {
        options: statusData,
      },
    },
    span: 6,
  },
  {
    span: 12,
    align: 'right',
    className: '!pr-0',
    itemRender: {
      name: 'AButtonGroup',
      children: [
        {
          props: { type: 'primary', content: '查询', htmlType: 'submit' },
          attrs: { class: 'mr-2' },
        },
        { props: { type: 'default', htmlType: 'reset', content: '重置' } },
      ],
    },
  },
];

export const formSchema = [
  {
    field: 'name',
    label: '配置名称',
    component: 'Input',
  },
  {
    field: 'warnType',
    label: '预警类型',
    component: 'Select',
    componentProps: {
      options: typeData
    },
  },
  {
    field: 'warnLevel',
    label: '预警等级',
    component: 'Select',

    componentProps: {
      options: statusData
    },
  },
  {
    field: 'targets',
    label: '发送对象',
    component: 'Select',
    componentProps: {
      options: targetData,
      mode: "multiple",
    },
  },
  {
    field: 'msgContent',
    label: '发送内容',
    component: 'InputTextArea',
  },

];
